<template>
  <view class="order-card">
    <view class="order-header">
      <text class="order-number">订单号：{{ order.orderNo }}</text>
      <text class="order-status" :class="order.status">{{ getStatusText(order.status) }}</text>
    </view>
    
    <view class="order-items">
      <view 
        v-for="item in order.items" 
        :key="item.id"
        class="order-item"
      >
        <image class="item-image" :src="item.image" mode="aspectFill" />
        <view class="item-details">
          <text class="item-name">{{ item.name }}</text>
          <text class="item-type">{{ item.type === 'course' ? '课程' : '商品' }}</text>
          <view class="item-price-qty">
            <text class="item-price">¥{{ item.price }}</text>
            <text class="item-quantity">x{{ item.quantity }}</text>
          </view>
        </view>
      </view>
    </view>
    
    <view class="order-footer">
      <text class="order-total">共{{ order.totalItems }}件商品 合计：¥{{ order.totalAmount }}</text>
      <view class="order-actions">
        <view 
          v-if="order.status === 'pending'" 
          class="action-btn cancel"
          @click="cancelOrder(order.id)"
        >
          取消订单
        </view>
        <view 
          v-if="order.status === 'pending'" 
          class="action-btn pay"
          @click="payOrder(order.id)"
        >
          立即支付
        </view>
        <view 
          v-if="order.status === 'shipped'" 
          class="action-btn confirm"
          @click="confirmOrder(order.id)"
        >
          确认收货
        </view>
        <view 
          v-if="order.status === 'completed'" 
          class="action-btn review"
          @click="reviewOrder(order.id)"
        >
          评价
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
defineProps({
  order: {
    type: Object,
    required: true
  }
})

const getStatusText = (status) => {
  const statusMap = {
    'pending': '待付款',
    'paid': '已付款',
    'shipped': '已发货',
    'completed': '已完成',
    'cancelled': '已取消'
  }
  return statusMap[status] || '未知状态'
}

const cancelOrder = (orderId) => {
  uni.showModal({
    title: '确认取消',
    content: '确定要取消这个订单吗？',
    success: (res) => {
      if (res.confirm) {
        uni.showToast({ title: '订单已取消', icon: 'success' })
      }
    }
  })
}

const payOrder = (orderId) => {
  uni.showToast({ title: '跳转到支付页面', icon: 'none' })
}

const confirmOrder = (orderId) => {
  uni.showToast({ title: '确认收货成功', icon: 'success' })
}

const reviewOrder = (orderId) => {
  uni.showToast({ title: '跳转到评价页面', icon: 'none' })
}
</script>

<style scoped>
.order-card {
  background: #fff;
  margin-bottom: 20rpx;
  border-radius: 15rpx;
  overflow: hidden;
}
.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25rpx 30rpx;
  border-bottom: 1px solid #f0f0f0;
  background: #f8f9fa;
}
.order-number {
  font-size: 26rpx;
  color: #666;
}
.order-status {
  font-size: 26rpx;
  font-weight: bold;
}
.order-status.pending {
  color: #ff6b35;
}
.order-status.paid {
  color: #28a745;
}
.order-status.shipped {
  color: #007bff;
}
.order-status.completed {
  color: #6c757d;
}
.order-items {
  padding: 0 30rpx;
}
.order-item {
  display: flex;
  padding: 25rpx 0;
  border-bottom: 1px solid #f5f5f5;
}
.order-item:last-child {
  border-bottom: none;
}
.item-image {
  width: 120rpx;
  height: 120rpx;
  border-radius: 10rpx;
  margin-right: 20rpx;
}
.item-details {
  flex: 1;
}
.item-name {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 10rpx;
  line-height: 1.4;
}
.item-type {
  font-size: 22rpx;
  color: #999;
  margin-bottom: 15rpx;
}
.item-price-qty {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.item-price {
  font-size: 28rpx;
  color: #ff6b35;
  font-weight: bold;
}
.item-quantity {
  font-size: 24rpx;
  color: #999;
}
.order-footer {
  padding: 25rpx 30rpx;
  border-top: 1px solid #f0f0f0;
}
.order-total {
  font-size: 26rpx;
  color: #333;
  margin-bottom: 20rpx;
}
.order-actions {
  display: flex;
  justify-content: flex-end;
  gap: 20rpx;
}
.action-btn {
  padding: 15rpx 30rpx;
  border-radius: 25rpx;
  font-size: 24rpx;
  text-align: center;
  min-width: 120rpx;
}
.action-btn.cancel {
  background: #f5f5f5;
  color: #666;
  border: 1px solid #ddd;
}
.action-btn.pay {
  background: linear-gradient(135deg, #ff6b35, #ff8c42);
  color: #fff;
}
.action-btn.confirm {
  background: #28a745;
  color: #fff;
}
.action-btn.review {
  background: #ffc107;
  color: #333;
}
</style>
